<template>
<view class="productDetails">
	<!-- 产品卡片 -->
	<view class="card"  >
		<view class="bg1"></view>
		<view class="bg2"></view>
		<view class="content">
			<p class="title"> #{{ productInfo.name }} </p>
			<p class="brief">{{ productInfo.brief }}</p>
		</view>
	</view>
	
	<!-- 产品信息 -->
	<view class="message">
		<view class="details" v-html="productInfo.html"></view>
	</view>
	
	<!-- 免责声明 -->
	<view class="statement">
		免责声明:信息内容仅供参考，转载或引用之目的在于传递信息，不代表对信息的真实性或准确性负责。本文不构成对任何人的投资建议，敬请您独立决策并自行承担风险。如信息内容侵犯您的知识产权，请提交相关链接至邮箱:1806065991@qq.com，我们将及时处理。请合理借贷，理性消费。
	</view>
	
	<!-- 咨询 -->
	<view class="btn-warpper" >
		<button class="btn" type="primary" @click="call">电话咨询</button>
		<button class="btn" type="primary" @click="online">在线咨询</button>
		
		
	</view>
	
	<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
		<view class="popup-box">
			<view class="popup-title" >
				<image class="popup-avatar" src="../../static/consult/avatar.png"></image>
				<view class="popup-text" >
					<span>周主任</span>
					<span style="color: #757575;">海南政枫商务咨询服务有限公司</span>
				</view>
			</view>
			<view class="code-box">
				<image class="code" src="../../static/consult/wxCode.png"  show-menu-by-longpress></image>
				<view class="hint" >
					扫描二维码或长按识别
				</view>
			</view>
		</view>
	</uni-popup>
	

	
</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad} from "@dcloudio/uni-app"

const zf_bankProduct = uniCloud.importObject('zf_bankProduct') 

const productInfo = ref({})

let popup = ref(null)

onLoad((e)=>{
	productInfo.value = JSON.parse(e.product)
})

const call = ()=>{
	uni.makePhoneCall({
		phoneNumber: 13136018388
	})
}

// 在线咨询
const online = ()=>{
	popup.value.open()
}

// 
const previewImage=()=> {
	uni.previewImage({
		current:'1',
		urls: ['../../static/consult/wxCode.png'],
		success: res => {
			console.log('previewImage res', res);
		},
		fail: err => {
			console.log('previewImage err', err);
		}
	});
}

</script>

<style lang="scss" scoped>
.productDetails{
	.card{
		position: relative;
		.bg1{
			background-color: #2F5CEA; height: 130rpx;
		}
		.bg2{
			background-color: #fff; height: 130rpx;
		}
		.content{
			box-shadow: 0 0 20rpx 1rpx #999;
			background-color: #fff;
			padding: 20rpx;
			position: absolute;
			inset: 40rpx;
			border-radius: 10rpx;
			.title{
				font-weight: 600;
				font-size: 35rpx;
				margin-bottom: 20rpx;
			}
			.brief{
				font-weight: 500;
				font-size: 28rpx;
			}
		}
	}

	.message{
		margin:10rpx 30rpx;
		background-color: #F7F7F7;
		.details{
			padding: 10px;
		}
	}
	
	.statement{
		display: inline-block;
		margin: 20rpx 20rpx 100rpx;
		font-size: 24rpx;
		background-color: #EAEAEA;
		padding: 10px;
		border-radius: 10rpx;
		color: #9E9E9E;
	}
	
	.btn-warpper{
		background-color: #fafafa;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 10rpx;
		display: flex;
		.btn{
			height:70rpx;
			line-height:70rpx;
			width: 330rpx
		}
	}
	
	.popup-box{
		border-radius: 10rpx;
		overflow: hidden;
		font-size: 20rpx;
		.popup-title{
			display: flex;
			align-items: center;
			background-image:linear-gradient(120deg,#84fab0 0%, #8fd3f4 100%);
			padding:30rpx 20rpx;
			.popup-avatar{
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.popup-text{
				display: flex;
				flex-direction: column;
			}
		}
		.code-box{
			padding: 60rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.code{
				width: 400rpx;
				height: 400rpx;
			}
			.hint{
				margin-top: 10rpx;
				color: #999;
			}
		}
		
	}
	
}
</style>
